<template>
  <div class="data-center-content">
    <!-- 视频数据概览 -->
    <div class="data-section">
      <div class="section-header">
        <div class="section-title">
          <img class="title-icon" src="~@/assets/icons/center/icon1.png" alt="" />
          <h2> 视频数据概览 </h2>
        </div>
        <div class="time-range-selector">
          <n-select v-model:value="selectedTimeRange" :options="timeRangeOptions" size="small" />
        </div>
      </div>

      <!-- 核心指标卡片 -->
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-icon">
            <img class="icon" src="~@/assets/icons/center/icon2.png" alt="" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(videoMetrics.totalPlays) }}</div>
            <div class="metric-label">总播放量</div>
            <div class="metric-change positive">+{{ videoMetrics.playGrowth }}%</div>
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-icon">
            <img class="icon" src="~@/assets/icons/center/icon3.png" alt="" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(videoMetrics.totalLikes) }}</div>
            <div class="metric-label">总点赞量</div>
            <div class="metric-change positive">+{{ videoMetrics.likeGrowth }}%</div>
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-icon">
            <img class="icon" src="~@/assets/icons/center/icon4.png" alt="" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(videoMetrics.totalSubscriptions) }}</div>
            <div class="metric-label">总订阅量</div>
            <div class="metric-change positive">+{{ videoMetrics.subscriptionGrowth }}%</div>
          </div>
        </div>
      </div>

      <!-- 视频数据图表 -->
      <div class="charts-grid">
        <div class="chart-container">
          <h3 class="chart-title">播放量趋势</h3>
          <div ref="playChartRef" class="chart"></div>
        </div>

        <div class="chart-container">
          <h3 class="chart-title">点赞量趋势</h3>
          <div ref="likeChartRef" class="chart"></div>
        </div>

        <div class="chart-container">
          <h3 class="chart-title">订阅量趋势</h3>
          <div ref="subscriptionChartRef" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 个人数据概览 -->
    <div class="data-section">
      <div class="section-header">
        <div class="section-title">
          <img class="title-icon" src="~@/assets/icons/center/icon5.png" alt="" />
          <h2> 个人数据概览 </h2>
        </div>
      </div>

      <!-- 个人核心指标 -->
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-icon">
            <img class="icon" src="~@/assets/icons/center/icon6.png" alt="" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(personalMetrics.homepageVisits) }}</div>
            <div class="metric-label">主页访问量</div>
            <div class="metric-change positive">+{{ personalMetrics.visitGrowth }}%</div>
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-icon">
            <img class="icon" src="~@/assets/icons/center/icon7.png" alt="" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ formatNumber(personalMetrics.totalFollowers) }}</div>
            <div class="metric-label">总关注量</div>
            <div class="metric-change positive">+{{ personalMetrics.followerGrowth }}%</div>
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-icon">
            <img class="icon" src="~@/assets/icons/center/icon8.png" alt="" />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ personalMetrics.conversionRate }}%</div>
            <div class="metric-label">粉丝转化率</div>
            <div class="metric-change positive">+{{ personalMetrics.conversionGrowth }}%</div>
          </div>
        </div>
      </div>

      <!-- 粉丝结构分析 -->
      <div class="demographics-section">
        <h3 class="subsection-title">粉丝结构分析</h3>

        <div class="demographics-grid">
          <div class="chart-container">
            <h4 class="chart-title">年龄分布</h4>
            <div ref="ageChartRef" class="chart"></div>
          </div>

          <div class="chart-container">
            <h4 class="chart-title">性别分布</h4>
            <div ref="genderChartRef" class="chart"></div>
          </div>

          <div class="chart-container">
            <h4 class="chart-title">地区分布</h4>
            <div ref="regionChartRef" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 个人数据趋势图表 -->
      <div class="charts-grid">
        <div class="chart-container full-width">
          <h3 class="chart-title">个人数据趋势</h3>
          <div ref="personalTrendChartRef" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import * as echarts from 'echarts';

  // 时间范围选择
  const selectedTimeRange = ref('7d');
  const timeRangeOptions = [
    { label: '最近7天', value: '7d' },
    { label: '最近30天', value: '30d' },
    { label: '最近90天', value: '90d' },
    { label: '最近一年', value: '1y' },
  ];

  // 视频数据
  const videoMetrics = ref({
    totalPlays: 125680,
    playGrowth: 12.5,
    totalLikes: 8960,
    likeGrowth: 8.3,
    totalSubscriptions: 2340,
    subscriptionGrowth: 15.2,
  });

  // 个人数据
  const personalMetrics = ref({
    homepageVisits: 45680,
    visitGrowth: 18.7,
    totalFollowers: 12340,
    followerGrowth: 22.1,
    conversionRate: 8.5,
    conversionGrowth: 3.2,
  });

  // 图表引用
  const playChartRef = ref<HTMLElement>();
  const likeChartRef = ref<HTMLElement>();
  const subscriptionChartRef = ref<HTMLElement>();
  const ageChartRef = ref<HTMLElement>();
  const genderChartRef = ref<HTMLElement>();
  const regionChartRef = ref<HTMLElement>();
  const personalTrendChartRef = ref<HTMLElement>();

  // 格式化数字
  const formatNumber = (num: number) => {
    if (num >= 10000) {
      return (num / 10000).toFixed(1) + 'w';
    }
    return num.toLocaleString();
  };

  // 生成模拟数据
  const generateTimeSeriesData = (days: number, baseValue: number, growth: number) => {
    const data = [];
    const labels = [];
    const today = new Date();

    for (let i = days - 1; i >= 0; i--) {
      const date = new Date(today);
      date.setDate(date.getDate() - i);
      labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));

      const randomFactor = 0.8 + Math.random() * 0.4; // 0.8-1.2的随机因子
      const trendFactor = 1 + ((growth / 100) * (days - i)) / days;
      data.push(Math.round(baseValue * randomFactor * trendFactor));
    }

    return { data, labels };
  };

  // 初始化播放量图表
  const initPlayChart = () => {
    if (!playChartRef.value) return;

    const chart = echarts.init(playChartRef.value);
    const { data, labels } = generateTimeSeriesData(7, 15000, 12.5);

    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
        splitLine: { lineStyle: { color: '#f1f5f9' } },
      },
      series: [
        {
          data: data,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#57be7d', width: 3 },
          itemStyle: { color: '#57be7d' },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(80, 200, 120, 0.3)' },
                { offset: 1, color: 'rgba(80, 200, 120, 0.05)' },
              ],
            },
          },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化点赞量图表
  const initLikeChart = () => {
    if (!likeChartRef.value) return;

    const chart = echarts.init(likeChartRef.value);
    const { data, labels } = generateTimeSeriesData(7, 1200, 8.3);

    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
        splitLine: { lineStyle: { color: '#f1f5f9' } },
      },
      series: [
        {
          data: data,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#d25282', width: 3 },
          itemStyle: { color: '#d25282' },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(247, 83, 97, 0.3)' },
                { offset: 1, color: 'rgba(247, 83, 97, 0.05)' },
              ],
            },
          },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化订阅量图表
  const initSubscriptionChart = () => {
    if (!subscriptionChartRef.value) return;

    const chart = echarts.init(subscriptionChartRef.value);
    const { data, labels } = generateTimeSeriesData(7, 300, 15.2);

    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
        splitLine: { lineStyle: { color: '#f1f5f9' } },
      },
      series: [
        {
          data: data,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#4c7fce', width: 3 },
          itemStyle: { color: '#4c7fce' },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(74, 144, 226, 0.3)' },
                { offset: 1, color: 'rgba(74, 144, 226, 0.05)' },
              ],
            },
          },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化年龄分布图表
  const initAgeChart = () => {
    if (!ageChartRef.value) return;

    const chart = echarts.init(ageChartRef.value);

    const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      series: [
        {
          type: 'pie',
          radius: ['20%', '50%'],
          center: ['50%', '50%'],
          data: [
            { value: 25, name: '18-25', itemStyle: { color: '#4a90e2' } },
            { value: 35, name: '26-35', itemStyle: { color: '#50c878' } },
            { value: 20, name: '36-45', itemStyle: { color: '#f75361' } },
            { value: 15, name: '46-55', itemStyle: { color: '#ffa726' } },
            { value: 5, name: '55以上', itemStyle: { color: '#ab47bc' } },
          ],
          label: {
            show: true,
            formatter: '{b}',
            fontSize: 12,
            color: '#64748b',
          },
          labelLine: {
            show: true,
            lineStyle: { color: '#e2e8f0' },
          },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化性别分布图表
  const initGenderChart = () => {
    if (!genderChartRef.value) return;

    const chart = echarts.init(genderChartRef.value);

    const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      series: [
        {
          type: 'pie',
          radius: ['20%', '50%'],
          center: ['50%', '50%'],
          data: [
            { value: 60, name: '男性', itemStyle: { color: '#4a90e2' } },
            { value: 40, name: '女性', itemStyle: { color: '#f75361' } },
          ],
          label: {
            show: true,
            formatter: '{b}',
            fontSize: 12,
            color: '#64748b',
          },
          labelLine: {
            show: true,
            lineStyle: { color: '#e2e8f0' },
          },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化地区分布图表
  const initRegionChart = () => {
    if (!regionChartRef.value) return;

    const chart = echarts.init(regionChartRef.value);

    const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      series: [
        {
          type: 'pie',
          radius: ['20%', '50%'],
          center: ['50%', '50%'],
          data: [
            { value: 30, name: '北京', itemStyle: { color: '#4a90e2' } },
            { value: 25, name: '上海', itemStyle: { color: '#50c878' } },
            { value: 20, name: '广州', itemStyle: { color: '#f75361' } },
            { value: 15, name: '深圳', itemStyle: { color: '#ffa726' } },
            { value: 10, name: '其他', itemStyle: { color: '#ab47bc' } },
          ],
          label: {
            show: true,
            formatter: '{b}',
            fontSize: 12,
            color: '#64748b',
          },
          labelLine: {
            show: true,
            lineStyle: { color: '#e2e8f0' },
          },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化个人数据趋势图表
  const initPersonalTrendChart = () => {
    if (!personalTrendChartRef.value) return;

    const chart = echarts.init(personalTrendChartRef.value);
    const { data: visitData, labels } = generateTimeSeriesData(30, 1500, 18.7);
    const { data: followerData } = generateTimeSeriesData(30, 400, 22.1);

    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e2e8f0',
        textStyle: { color: '#1e293b' },
      },
      legend: {
        data: ['主页访问量', '新增关注量'],
        top: 10,
        textStyle: { color: '#64748b' },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#e2e8f0' } },
        axisLabel: { color: '#64748b', fontSize: 12 },
        splitLine: { lineStyle: { color: '#f1f5f9' } },
      },
      series: [
        {
          name: '主页访问量',
          data: visitData,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#4a90e2', width: 3 },
          itemStyle: { color: '#4a90e2' },
        },
        {
          name: '新增关注量',
          data: followerData,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#50c878', width: 3 },
          itemStyle: { color: '#50c878' },
        },
      ],
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
  };

  // 初始化所有图表
  const initAllCharts = async () => {
    await nextTick();
    initPlayChart();
    initLikeChart();
    initSubscriptionChart();
    initAgeChart();
    initGenderChart();
    initRegionChart();
    initPersonalTrendChart();
  };

  onMounted(() => {
    initAllCharts();
  });
</script>

<style lang="less" scoped>
  .data-center-content {
    padding: 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    height: 100%;
    overflow-y: auto;
  }

  .data-section {
    margin-bottom: 40px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(226, 232, 240, 0.3);

    .section-title {
      font-size: 24px;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;

      .title-icon {
        width: 26px;
        display: block;
      }
    }

    .time-range-selector {
      min-width: 120px;
    }
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
  }

  .metric-card {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(226, 232, 240, 0.5);

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .metric-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;

      &.icon {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .metric-content {
      flex: 1;

      .metric-value {
        font-size: 32px;
        font-weight: 700;
        color: #666666;
        line-height: 1;
        margin-bottom: 8px;
      }

      .metric-label {
        font-size: 14px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 4px;
      }

      .metric-change {
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 12px;
        display: inline-block;

        &.positive {
          background: rgba(80, 200, 120, 0.1);
          color: #50c878;
        }

        &.negative {
          background: rgba(247, 83, 97, 0.1);
          color: #f75361;
        }
      }
    }
  }

  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;

    &.full-width {
      grid-template-columns: 1fr;
    }
  }

  .chart-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .chart-title {
      font-size: 16px;
      font-weight: 600;
      color: #666666;
      margin: 0 0 16px 0;
      text-align: center;
    }

    .chart {
      height: 300px;
      width: 100%;
    }
  }

  .demographics-section {
    margin-bottom: 32px;

    .subsection-title {
      font-size: 18px;
      font-weight: 600;
      color: #666666;
      margin: 0 0 20px 0;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(226, 232, 240, 0.3);
    }

    .demographics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .data-center-content {
      padding: 16px;
    }

    .metrics-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .charts-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .demographics-grid {
      grid-template-columns: 1fr;
    }

    .metric-card {
      padding: 16px;

      .metric-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
      }

      .metric-content .metric-value {
        font-size: 24px;
      }
    }

    .chart-container .chart {
      height: 250px;
    }
  }
</style>
